<template>
  <div class="container">
    <ul class="nav">
      <li
         class="navigation-right"
         :class="{active: activeId === category.id}"
         v-for="(category, index) in categoryList" 
         :key="index"
         @click="selectCategory(category.id)"
      >{{category.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  model: {
    prop: "categoryId",
    event: "update:categoryId"
  },
  props: ["categoryList","categoryId"],
  data() {
    return {
      activeId: 0,
    }
  },
  computed: {
  },
  methods: {
    selectCategory(id) {
      this.activeId = id
      this.$emit("update:categoryId", id)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  .nav {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 24px 0;
    .navigation-right {
      cursor: pointer;
      margin-right: 30px;
      margin-bottom: 12px;
      &.active{
        color: #eedf81
      }
    }
  }
}
</style>